<template>
    <el-dropdown trigger="click" placement="bottom-end" @command="handleCommand">
        <span class="el-dropdown-link">
            当前用户:&nbsp;&nbsp;{{ adminname }}
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="a">系统设置</el-dropdown-item>
                <el-dropdown-item command="b">个人中心</el-dropdown-item>
                <el-dropdown-item command="c"> 退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup lang='ts'>
import {
    ArrowDown
} from '@element-plus/icons-vue'


// 获取登录时存在pinia 仓库中用户信息
import { useUserStore } from '@/stores/userstore';
import { useRouter } from 'vue-router'
const userStore = useUserStore();
const adminname = userStore.adminname
const router = useRouter()
const handleCommand = (command: string | number | object) => {
    console.log('command', command);
    if (command == 'c') {
        // 说明点击的是退出登录按钮
        // 01: 清除登录时的标记
        localStorage.removeItem('token');
        userStore.setAdminNameFn('');
        userStore.setCheckedKeysFn([]);
        userStore.setRoleFn(1)

        // 02: 重新跳转到登录页 
        setTimeout(() => {
            localStorage.removeItem('pinia-user')
            router.replace('/login')
        }, 1000)
    }

}
</script>
<style scoped></style>